<!DOCTYPE>
<html>

<head>
	<meta charset="utf-8" />
	<title>无标题文档</title>
	<style>
		* {
			padding: 0 ;
			margin:0
		}

		#menu li {
			position: relative;
		}

		#menu li div {
			display: none;
			width: 300px;
			height: 300px;
			background: yellow;
			position: absolute;
			left: 100px;
			top: 0px;
		}
	</style>
	<script type="text/javascript">
		/*
		window.onload=function(){
			var oBtn=document.getElementById('a');
			var oUl=document.getElementById('ul');
			var aLi=oUl.getElementsByTagName('li');
			var oDiv=document.getElementById('div');
			var aDiv=oDiv.getElementsByTagName('div');
				
			oBtn.onmouseover=function(){
				oUl.style.display='block'
			}
			oUl.onmouseout=function(){
				oUl.style.display='none'
			}
			for(var i=0;i<aLi.length;i++){
				aLi[i].index=i
				aDiv[i].index=i
				aLi[i].onmouseover=function(){
					tabShow(this.index,aDiv,oUl)	
				}
				aDiv[i].onmouseover=function(){
					tabShow(this.index,aDiv,oUl)
				}
				aDiv[i].onmouseout=aLi[i].onmouseout=function(){
					tabDis(aDiv,oUl)
				}	
			}	
		}
			function tabShow(index,aDiv,oUl){
				for(i=0;i<aDiv.length;i++){
					aDiv[i].style.display='none'
				}
				aDiv[index].style.display='block'
				oUl.style.display='block'
			}
			
			
			function tabDis(aDiv,oUl){
				for(i=0;i<aDiv.length;i++){
					aDiv[i].style.display='none'
				}
				oUl.style.display='none'
			}
		*/
		onload = function () {
			var all = document.getElementById("all");
			var menu = document.getElementById("menu");
			var menu_items = menu.children;

			all.onmouseover = function () {
				menu.style.display = "block";
			}
			all.onmouseout = function () {
				menu.style.display = "none";
			}
			for (var i = 0; i < menu_items.length; i++) {
				menu_items[i].onmouseover = function () {
					console.log("xxx");
					this.children[0].style.display = "block";
				}
			}

		}

	</script>
</head>

<body>
	<div href="#" id="all" style="display:block; width:100px; background:red;">全部商品
		<ul id="menu"
			style="display:none; width:100px; height:300px; padding:0; margin:0; background:green;float:left;">
			<li>一级菜单A
				<div>二级AAAA</div>
			</li>
			<li>一级菜单B
				<div>二级BBBB</div>
			</li>
			<li>一级菜单C
				<div>二级CCCC</div>
			</li>
		</ul>
	</div>
</body>

</html>